<template>
  <vue-modal
    title="大咖说配置"
    ok-text="提交"
    cancel-text="取消"
    :show.sync="showModal"
    effect="fade"
    :small="true"
    :width="500"
    :callback="submit">
    <div slot="modal-body" class="modal-body">
      <form class="form-horizontal" role="form">
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*配图</label>
          <div class="col-sm-9 text-left">
            <div class="preview" v-if="form.voicePicUrl">
              <img :src="form.voicePicUrl">
            </div>
            <input type="file" class="form-control" accept="image/gif, image/jpeg, image/png" v-el:pic-file @change="picFileChange">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*语音</label>
          <div class="col-sm-9 text-left">
            <div class="preview" v-if="form.voiceUrl">
              <a :href="form.voiceUrl">原语音</a>
            </div>
            <input type="file" class="form-control" accept="audio/mpeg, application/ogg, audio/ogg, audio/x-wav" v-el:audio-file @change="voiceFileChange">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*音频时长（秒）</label>
          <div class="col-sm-9 text-left">
            <input type="number" class="form-control" v-model="form.voiceDuration">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*标题</label>
          <div class="col-sm-9 text-left">
            <input type="text" class="form-control" v-model="form.title">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*时间</label>
          <div class="col-sm-9 text-left">
            <vue-date-picker
              :time.sync="form.pubDate"
              :option='datePickerOption'>
            </vue-date-picker>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*标签</label>
          <div class="col-sm-9 text-left">
            <input type="text" class="form-control" v-model="form.tags" placeholder="多标签使用逗号隔开">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*主讲人</label>
          <div class="col-sm-9 text-left">
            <input type="text" class="form-control" v-model="form.speaker">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*主讲人公司</label>
          <div class="col-sm-9 text-left">
            <input type="text" class="form-control" v-model="form.speakerCompany">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*主讲人职位</label>
          <div class="col-sm-9 text-left">
            <input type="text" class="form-control" v-model="form.speakerJobTitle">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*简介</label>
          <div class="col-sm-9 text-left">
            <textarea rows="3" class="form-control" v-model="form.body"></textarea>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*会议纪要</label>
          <div class="col-sm-9 text-left">
            <textarea rows="3" class="form-control" v-model="form.meetingSummary"></textarea>
          </div>
        </div>
      </form>
    </div>
  </vue-modal>
</template>
<style src="./item-config.css" scoped></style>
<script src="./item-config.js"></script>